<!doctype html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <title>添加用户</title>
  <link rel="stylesheet" href="./asset/css/components.css" />
  <link rel="stylesheet" href="./asset/css/bootstrap.css" />
  <link rel="stylesheet" href="./asset/css/plugins.css" />
  <link rel="stylesheet" href="./asset/css/main.css" />
  <link rel="stylesheet" href="./asset/css/themes.css" />
</head>

<body>
<div id="body">
  <div id="app">
    <div class="tabbody">
      <div class="bodyli active">
        <div class="inputbox">
          <span class="title">用户名</span>
          <div class="inputright">
            <input type="text" id="username" v-model="username" class="form-control input-sm"
                   placeholder="请输入用户名">
          </div>
        </div>
        <div class="inputbox">
          <span class="title">密码</span>
          <div class="inputright">
            <input type="password" id="password" v-model="password" class="form-control input-sm"
                   placeholder="请输入密码">
          </div>
        </div>
        <div class="inputbox">
          <span class="title">姓名</span>
          <div class="inputright">
            <input type="text" id="realname" v-model="realname" class="form-control input-sm"
                   placeholder="请输入姓名">
          </div>
        </div>
          <div class="inputbox">
            <span class="title">性别</span>
            <div class="inputright">
              <select id="sex" value="" type="sex" style="flex: 1;color:#999;height: 30px;padding: 0px 10px;border: 1px solid #ddd;font-size: 12px;line-height: 1.5;" name="sex" v-model="sex" lay-verify="">
                <option value="">请选择性别</option>
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </div>
          </div>
            <div class="inputbox">
              <span class="title">年龄</span>
              <div class="inputright">
                <input type="text" id="age" v-model="age" class="form-control input-sm"
                       placeholder="请输入年龄">
              </div>

        </div>
        <div class="inputbox">
          <span class="title">联系方式</span>
          <div class="inputright">
            <input type="text" id="tel" v-model="tel" class="form-control input-sm"
                   placeholder="请输入联系方式">
          </div>
        </div>
        <div class="inputbox" style="display: none">
          <span class="title">类型</span>
          <div class="inputright">
            <input type="text" v-model="type" value="1" class="form-control input-sm">
          </div>
        </div>

        <div class="tbfooter">
          <button class="btn btn-success" @click.prevent="save()"><i class="fa fa-floppy-o"></i>
            提交保存</button>
          &nbsp;&nbsp;&nbsp;
          <button class="btn btn-default" @click.prevent="reset()"><i class="fa fa-recycle"></i>
            取消重置</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="./asset/js/jquery.min.js"></script>
<script type="text/javascript" src="./asset/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./asset/js/axios.min.js"></script>
<script type="text/javascript" src="./asset/js/vue.js"></script>
<script type="text/javascript">
  const vue = new Vue({ // 实例化Vue对象
    el: '#app',// 绑定作用域
    data: { //定义数据
      username: '', // 定义用户名数据
      password: '', // 定义密码数据
      realname: '', // 定义姓名数据
      sex: '', //
      age: '', //
      tel: '', //
      type: '',
    },
    methods: {
      save: function () {
        let _this = this;
        var data = {
          username: _this.username,
          password: _this.password,
          realname: _this.realname,
          sex: _this.sex,
          age: _this.age,
          tel: _this.tel,
          type:_this.type,
        };
        axios.post('http://127.0.0.1:8080/equipment/user/insertUser.action', data).then(result => {
          if (result.data.code > 0) {
            if (window.confirm('保存成功,是否继续添加？')) {
              _this.reset();
            } else {
              var index = parent.layer.getFrameIndex(window.name);
              parent.location.reload();
              parent.layer.close(index);
            }
          } else {
            console.log('保存失败,请稍后再试');
          }
        });
      },
      reset: function () {
        this.pageLoad();
      },
      pageLoad: function () { // 页面加载
        this.username = '';
        this.password = '';
        this.realname = '';
        this.tel = '';
        this.age = '';
        this.sex = '';
        this.type = '1';

      },
      validate: function () { // 验证输入非空
      },
    },
    created() { // 生命周期相关的函数
      let _this = this;
      _this.pageLoad();
    },
  })
</script>

</body>

</html>